{% extends "base.html" %}

{% block title %}客户管理 - {% if customer %}编辑客户{% else %}添加客户{% endif %}{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.list_customers') }}" class="text-gray-500 hover:text-gray-700">客户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">{% if customer %}编辑客户{% else %}添加客户{% endif %}</li>
        </ol>
    </nav>

    <div class="bg-white rounded-lg shadow">
        <div class="p-6">
            <form method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="grid grid-cols-1 gap-6">
                    <!-- 基本信息 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700">客户名称 <span class="text-red-500">*</span></label>
                                <input type="text" name="name" id="name" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ customer.name if customer else '' }}">
                            </div>
                            <div>
                                <label for="customer_number" class="block text-sm font-medium text-gray-700">客户编号</label>
                                <input type="text" id="customer_number" readonly
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 bg-gray-50"
                                    value="{{ customer.customer_number if customer else preview_customer_number }}" placeholder="系统自动生成">
                            </div>
                            <div>
                                <label for="category" class="block text-sm font-medium text-gray-700">客户分类 <span class="text-red-500">*</span></label>
                                <select name="category" id="category" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    onchange="toggleOtherInput('category', 'category_other_div')">
                                    <option value="">请选择客户分类</option>
                                    {% for value, label in categories %}
                                    <option value="{{ value }}" {% if customer and customer.category == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div id="category_other_div" style="display: none;">
                                <label for="category_other" class="block text-sm font-medium text-gray-700">客户分类说明</label>
                                <input type="text" name="category_other" id="category_other"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ customer.category_other if customer else '' }}"
                                    placeholder="请输入客户分类说明">
                            </div>
                            <div>
                                <label for="location" class="block text-sm font-medium text-gray-700">客户归属地 <span class="text-red-500">*</span></label>
                                <select name="location" id="location" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    onchange="toggleOtherInput('location', 'location_other_div')">
                                    <option value="">请选择客户归属地</option>
                                    {% for value, label in locations %}
                                    <option value="{{ value }}" {% if customer and customer.location == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div id="location_other_div" style="display: none;">
                                <label for="location_other" class="block text-sm font-medium text-gray-700">客户归属地说明</label>
                                <input type="text" name="location_other" id="location_other"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ customer.location_other if customer else '' }}"
                                    placeholder="请输入客户归属地说明">
                            </div>
                            <div>
                                <label for="source" class="block text-sm font-medium text-gray-700">客户来源 <span class="text-red-500">*</span></label>
                                <select name="source" id="source" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    onchange="toggleOtherInput('source', 'source_other_div')">
                                    <option value="">请选择客户来源</option>
                                    {% for value, label in sources %}
                                    <option value="{{ value }}" {% if customer and customer.source == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div id="source_other_div" style="display: none;">
                                <label for="source_other" class="block text-sm font-medium text-gray-700">客户来源说明</label>
                                <input type="text" name="source_other" id="source_other"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ customer.source_other if customer else '' }}"
                                    placeholder="请输入客户来源说明">
                            </div>
                        </div>
                    </div>

                    <!-- 地址信息 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">地址信息</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label for="province_id" class="block text-sm font-medium text-gray-700">省份</label>
                                <select name="province_id" id="province_id"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    onchange="loadCities(this.value)">
                                    <option value="">请选择省份</option>
                                    {% for province in provinces %}
                                    <option value="{{ province[0] }}" {% if customer and customer.province_id == province[0] %}selected{% endif %}>{{ province[1] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <label for="city_id" class="block text-sm font-medium text-gray-700">城市</label>
                                <select name="city_id" id="city_id"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    onchange="loadDistricts(this.value)">
                                    <option value="">请选择城市</option>
                                    {% for city in cities %}
                                    <option value="{{ city[0] }}" {% if customer and customer.city_id == city[0] %}selected{% endif %}>{{ city[1] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <label for="district_id" class="block text-sm font-medium text-gray-700">区县</label>
                                <select name="district_id" id="district_id"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
                                    <option value="">请选择区县</option>
                                    {% for district in districts %}
                                    <option value="{{ district[0] }}" {% if customer and customer.district_id == district[0] %}selected{% endif %}>{{ district[1] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="md:col-span-3">
                                <label for="address" class="block text-sm font-medium text-gray-700">详细地址</label>
                                <input type="text" name="address" id="address"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ customer.address if customer else '' }}"
                                    placeholder="请输入详细地址">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <a href="{{ url_for('customer.list_customers') }}" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        取消
                    </a>
                    <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        {% if customer %}保存修改{% else %}添加客户{% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// 显示/隐藏"其他"选项的输入框
function toggleOtherInput(selectId, divId) {
    const select = document.getElementById(selectId);
    const div = document.getElementById(divId);
    
    if (select.value === '其他') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

// 加载城市列表
function loadCities(provinceId) {
    if (!provinceId) {
        document.getElementById('city_id').innerHTML = '<option value="">请选择城市</option>';
        document.getElementById('district_id').innerHTML = '<option value="">请选择区县</option>';
        return;
    }
    
    fetch(`/customer/api/regions/${provinceId}/cities`)
        .then(response => response.json())
        .then(data => {
            const citySelect = document.getElementById('city_id');
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            
            data.forEach(city => {
                const option = document.createElement('option');
                option.value = city[0];
                option.textContent = city[1];
                citySelect.appendChild(option);
            });
            
            // 清空区县选项
            document.getElementById('district_id').innerHTML = '<option value="">请选择区县</option>';
        })
        .catch(error => {
            console.error('加载城市列表失败:', error);
        });
}

// 加载区县列表
function loadDistricts(cityId) {
    if (!cityId) {
        document.getElementById('district_id').innerHTML = '<option value="">请选择区县</option>';
        return;
    }
    
    fetch(`/customer/api/regions/${cityId}/districts`)
        .then(response => response.json())
        .then(data => {
            const districtSelect = document.getElementById('district_id');
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            
            data.forEach(district => {
                const option = document.createElement('option');
                option.value = district[0];
                option.textContent = district[1];
                districtSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('加载区县列表失败:', error);
        });
}

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
    // 如果是编辑页面，根据当前值显示/隐藏"其他"输入框
    {% if customer %}
    if (document.getElementById('category').value === '其他') {
        document.getElementById('category_other_div').style.display = 'block';
    }
    if (document.getElementById('location').value === '其他') {
        document.getElementById('location_other_div').style.display = 'block';
    }
    if (document.getElementById('source').value === '其他') {
        document.getElementById('source_other_div').style.display = 'block';
    }
    {% endif %}
});
</script>
{% endblock %}